<template>
    <div>
        <el-row type="flex" justify="center">
            <el-col :span="12" class="tip">
                <h1>
                    亲爱的<span>{{ user.nickName }}</span
                    >,欢迎使用新宇工资管理系统!
                </h1>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center" :gutter="20">
            <el-col :span="11">
                <!-- 用户信息 -->
                <el-card shadow="hover" style="height: 252px">
                    <div class="user-info">
                        <el-avatar :src="user.iconUrl" class="user-avator"></el-avatar>
                        <div class="user-info-cont">
                            <div class="user-info-name">{{ user.nickName }}</div>
                            <div>
                                员工编号: <span>{{ employee.tellerId }}</span>
                            </div>
                            <div>
                                姓名: <span>{{ employee.name }}</span>
                            </div>
                            <div>
                                职位: <span>{{ position.name }}</span>
                            </div>
                        </div>
                    </div>
                    <!-- 基础信息 -->
                    <div class="roleMsg">
                        <span>账号角色:</span>
                        <el-tag v-for="(item, index) in user.roles" :key="index">{{ item.name }}</el-tag>
                    </div>

                    <div class="user-info-list">
                        上次退出时间：
                        <span>{{ user.lastTime }}</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="11">
                <el-card shadow="hover" style="height: 252px">
                    <el-row type="flex" justify="center">
                        <el-col :span="11">
                            <h2>{{ date | formaDate }}</h2>
                        </el-col>
                    </el-row>
                    <el-row type="flex" justify="center">
                        <el-col :span="8">
                            <el-button type="success" disabled class="signButton">签到</el-button>
                        </el-col>
                        <el-col :span="8">
                            <el-button type="primary" disabled class="signButton">签退</el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center" :gutter="20">
            <el-col :span="11">
                <el-card shadow="hover">
                    <el-row type="flex" justify="center">
                        <el-col :span="8"
                            ><el-button type="warning" circle class="dh" @click="$router.push({ path: '/self' })"
                                ><span class="el-icon-bank-card zt">用户详情</span></el-button
                            ></el-col
                        >
                        <el-col :span="8"
                            ><el-button type="primary" circle class="dh" @click="$router.push({ path: '/mymessage' })"
                                ><span class="el-icon-message zt">个人消息</span></el-button
                            ></el-col
                        >
                    </el-row>
                    <el-row type="flex" justify="center">
                        <el-col :span="8"
                            ><el-button type="success" circle class="dh" @click="$router.push({ path: '/addMessage' })"
                                ><span class="el-icon-s-promotion zt">发送消息</span></el-button
                            ></el-col
                        >
                        <el-col :span="8"
                            ><el-button type="info" circle class="dh" @click="$router.push({ path: '/addLeave' })"
                                ><span class="el-icon-toilet-paper zt">快速请假</span></el-button
                            ></el-col
                        >
                    </el-row>
                </el-card>
            </el-col>

            <el-col :span="11">
                <el-card shadow="hover">
                    <schart class="schart" canvasId="pie" :options="options3"></schart>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import originDate from '../../assets/date/date.json';
import Schart from 'vue-schart';
import bus from '../common/bus';
var padaDate = function (value) {
    return value < 10 ? '0' + value : value;
};

export default {
    name: 'dashboard',
    data() {
        return {
            isSignIn: true,
            isSignOut: false,
            checks: [],
            date: {},
            token: {},
            user: {},
            permissions: {},
            position: {},
            dept: {},
            employee: {},
            options3: {
                type: 'pie',
                title: {
                    text: '上月考勤情况'
                },
                labels: ['迟到', '缺勤', '早退', '请假', '正常', '未签退', '迟到且早退'],
                datasets: [
                    {
                        data: [278, 190, 235, 260, 200, 141, 100]
                    }
                ]
            }
        };
    },
    components: {
        Schart
    },
    created: function () {
        this.getCheckBySelf();
        this.getUser();
        this.saveEducation();
        this.saveType();
        this.saveResult();
        this.saveLeaveResult();
    },
    filters: {
        //设置一个函数来进行过滤
        formaDate: function (value) {
            //创建一个时间日期对象
            var date = new Date();
            var year = date.getFullYear(); //存储年
            var month = padaDate(date.getMonth() + 1); //存储月份
            var day = padaDate(date.getDate()); //存储日期
            var hours = padaDate(date.getHours()); //存储时
            var minutes = padaDate(date.getMinutes()); //存储分
            var seconds = padaDate(date.getSeconds()); //存储秒
            //返回格式化后的日期
            return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
        }
    },

    mounted() {
        let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(() => {
            _this.date = new Date(); // 修改数据date
        }, 1000);
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
        }
    },

    methods: {
        getUser() {
            this.user = JSON.parse(window.sessionStorage.getItem('user'));
            this.saveEmployee();
        },

        async getCheckBySelf() {
            let date = new Date();

            let condition = {
                year: date.getFullYear(),
                month: date.getMonth() - 1,
                tid: this.user.tid
            };
            if (condition.month == 0) {
                condition.month = 12;
                condition.year = condition.year - 1;
            }
            var d = await this.$http.post('/checkMap', condition);
            if (d.code == 200) {
                this.checks = d.data;
                this.initPieChart(d.data);
            }
        },

        initPieChart(checks) {
            let late = 0;
            let normal = 0;
            let early = 0;
            let absence = 0;
            let leave = 0;
            let noOut = 0;
            let lateAearly = 0;
            for (let i = 0; i < checks.length; i++) {
                if (checks[i].result == '00') {
                    late++;
                }
                if (checks[i].result == '01') {
                    normal++;
                }
                if (checks[i].result == '02') {
                    early++;
                }
                if (checks[i].result == '03') {
                    absence++;
                }
                if (checks[i].result == '04') {
                    leave++;
                }
                if (checks[i].result == '05') {
                    noOut++;
                }
                if (checks[i].result == '06') {
                    lateAearly++;
                }
            }
            this.options3.datasets[0].data = [late, absence, early, leave, normal, noOut, lateAearly];
        },

        async saveDept() {
            var d = await this.$http.get('/dept/' + this.position.did);
            if (d.code == 200) {
                window.sessionStorage.setItem('dept', JSON.stringify(d.data));
            }
        },
        async savePosition() {
            var d = await this.$http.get('/position/' + this.employee.pid);
            if (d.code == 200) {
                this.position = d.data;
                window.sessionStorage.setItem('position', JSON.stringify(d.data));
                this.saveDept();
            }
        },
        async saveEmployee() {
            var d = await this.$http.get('/employeetid/' + this.user.tid);
            if (d.code == 200) {
                this.employee = d.data;
                window.sessionStorage.setItem('employee', JSON.stringify(d.data));
                this.savePosition();
            }
        },
        saveEducation() {
            window.sessionStorage.setItem('education', JSON.stringify(originDate.education));
        },

        saveType() {
            window.sessionStorage.setItem('type', JSON.stringify(originDate.type));
        },

        saveResult() {
            window.sessionStorage.setItem('result', JSON.stringify(originDate.result));
        },
        saveLeaveResult() {
            window.sessionStorage.setItem('leaveResult', JSON.stringify(originDate.leaveResult));
        },

        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            });
        }
    }
};
</script>


<style scoped>
.zt {
    font-size: 25px;
}

.dh {
    width: 150px;
    height: 150px;
}
.el-tag {
    margin-left: 10px;
}
.roleMsg {
    margin-bottom: 10px;
}
.el-row {
    margin-bottom: 20px;
}

.schart {
    width: 600px;
    height: 400px;
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 20px;
}
.tip {
    margin-top: 20px;
}
.signButton {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    font: bold 30px Georgia, serif;
}
</style>
